<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>后台-添加博客</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container text-center">
  <div class="w-100 me-auto ms-auto" style="max-width: 400px;margin-top: 20vh">
    <h1 class="h3 mb-3 fw-normal">博客后台</h1>

    <div class="form-floating mb-3">
      <input id="usernameInput" type="text" class="form-control" >
      <label>账号</label>
    </div>
    <div class="form-floating mb-3">
      <input id="passwordInput" type="text" class="form-control">
      <label>密码</label>
    </div>

    <button class="w-100 btn btn-lg btn-primary" type="submit" onclick="login()" >登陆</button>
  </div>
</div>

<!--bootstrap的js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
<script>
  function login(){
    const username = $("#usernameInput").val()
    const password = $("#passwordInput").val()
    axios({
      method: 'post',
      url:'http://localhost:8081/login',
      data: {
        username,
        password
      }
    }).then(({ data: res }) => {
      // 请求成功

      console.log(res) // res 服务器响应回来的数据
      if (res.code === 20000){
          window.location.href = '/admin';
                    }

    })
  }
</script>
</html>